<template>
  <div class="me-header">
    <van-cell-group inset>
      <van-cell
        value="账号密码登录"
        is-link
        to="/login"
        v-if="!(user && user.token)"
      >
        <template #title>
          <span>登录财经通</span>
        </template>
      </van-cell>
      <van-cell v-else>
        <template #title>
          <div class="cell-header">
            <van-image
              width="1rem"
              height="1rem"
              fit="contain"
              :src="user.avatar"
            />
            <div class="header-right">
              <div class="name">
                {{ user.nickname }}
              </div>
            </div>
          </div>
        </template>
      </van-cell>
      <van-cell>
        <template>
          <van-grid :border="false">
            <van-grid-item icon="./imgs/me1.png" text="收藏" />
            <van-grid-item icon="./imgs/me2.png" text="评论" />
            <van-grid-item icon="./imgs/me3.png" text="赞过" />
            <van-grid-item icon="./imgs/me4.png" text="最近" />
          </van-grid>
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  mounted() {
    console.log(this.user);
  },
  computed: {
    ...mapState(["user"]),
  },
};
</script>

<style lang="less" scoped>
.me-header {
  padding-top: 1rem;
}
.cell-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  .name {
    color: rgb(126, 121, 121);
  }
}
</style>
